<template><!-- <div class="new">
        <div class="new-row">
            <div class="new-row-item" v-for="v, vk in arr" :key="v.id" @drop="onDrop($event, vk)"
                @dragenter="dragenter($event, v)" @dragover="preventDefault" @dragleave="dragleave($event, v)">
                <span>
                    {{ v.text }}
                </span>
                <div class="new-row-item-drap" v-for="item, key in v.task" draggable="true"
                    @dragstart="onDragstart($event, v, vk, key)">{{ item.text }}</div>
                <div class="new-row-item-drap new-row-item-drap2" v-show="active == v.id">drap</div>
            </div>
        </div>
</div> -->

    <a-button @click="addTask">add task</a-button>
    <a-modal v-model:visible="visible" title="add task" @ok="handleOk">
        <a-form ref="formRef" :model="formState" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
            <a-form-item label="time" name="time" :rules="[{ required: true, message: '请选择日期' }]">
                <a-range-picker v-model:value="formState.time" show-time />
            </a-form-item>
            <a-form-item label="describe" name="describe" :rules="[{ required: true, message: '请输入描述' }]">
                <a-textarea v-model:value="formState.describe"></a-textarea>
            </a-form-item>
        </a-form>
    </a-modal>
    <sa-calendar :startWeek="startWeek" :data="data">
        <template #dayItem="{ item, index }">
            <div @drop="dragUp($event, item, index)" @dragenter="dragEnter($event, item, index)" @dragover="dragover"
                class="drag-box">
                <div class="drag-box-header">{{ item.day }}</div>
                <template v-if="item.detail">
                    <div class="drag-box-task">
                        <!-- draggable="true" -->
                        <div draggable="true" @dragstart="dragStart($event, item, index, taskIndex, task)"
                            class="drag-box-task-item" :class="`drag-box-task-item-${task.taskId}`"
                            :key="'drag-box-task-item' + taskIndex" v-for="task, taskIndex in item.detail.task">
                            <template v-if="task.len">
                                <div class="drag-box-task-item-content" :style="{ width: task.len * 100 + '%' }">
                                    {{ task.text }}
                                </div>
                            </template>
                        </div>

                    </div>
                </template>
            </div>
        </template>
    </sa-calendar>
</template>

<script setup lang="ts">
import moment from 'moment';
import { reactive, ref } from 'vue';
let data: any = reactive([
]);
let dragDetail: any = reactive({
    start: {},
    taskData: {},
    startX: null,
    startY: null
})
let mouse_detail = reactive({
    startX: 0,
    startY: 0
})
const dragStart = (event: DragEvent, item: any, index: Number, taskIndex: Number, task: any) => {
    dragDetail.start = item;
    dragDetail.taskData = task;
    dragDetail.startX = event.clientX;
    dragDetail.startY = event.clientY;
}
const dragUp = (event: DragEvent, item: any, index: Number) => {
    [...document.querySelectorAll('.drag-box-task-item-' + dragDetail.taskData.taskId)].map((v) => {
        v.style.left = '0px';
        v.style.top = '0px';
    })
}
const dragEnter = (event: DragEvent, item: any, index: Number) => {
    dragDetail.enterIndex = index;
}

let formState = reactive({
    time: [],
    describe: '新建任务'
})
let visible = ref(false);
const addTask = () => {
    visible.value = true;
}
let formRef = ref();
let startWeek = ref(1);
const handleOk = () => {
    formRef.value
        .validate()
        .then(() => {
            let startTime = new Date(formState.time[0]);
            let endTime = new Date(formState.time[1]);
            let startTime_date = startTime.getDate();
            let startTime_year = startTime.getFullYear();
            let startTime_month = startTime.getMonth();
            let endTime_date = endTime.getDate();
            let endTime_year = endTime.getFullYear();
            let endTime_month = endTime.getMonth();
            let difTime_date = endTime_date - startTime_date + 1;
            let taskId = String(new Date().getTime());

            let task = {
                text: formState.describe,
                taskId: taskId,
                startTime: startTime,
                endTime: endTime,
            }
            let len = 1;
            for (let i = 0; i < difTime_date; i++) {
                let newTime = new Date(startTime_year, startTime_month, startTime_date + i);
                let newTime_format = moment(newTime).format("YYYY-MM-DD")
                let current_ = data.filter((v: { date: string }) => v.date == newTime_format)[0];
                if (current_) {
                    current_.task.push(
                        { ...task, time: newTime, len }
                    )
                } else {
                    data.push({
                        date: newTime_format,
                        task: [
                            { ...task, time: newTime, len }
                        ]
                    })
                }
            }
            visible.value = false;
        })
}

const dragover = (event: DragEvent) => {
    // drag-box-task-item-1676887727665
    [...document.querySelectorAll('.drag-box-task-item-' + dragDetail.taskData.taskId)].map((v) => {
        v.style.left = -(dragDetail.startX - event.clientX) + 'px';
        v.style.top = -(dragDetail.startY - event.clientY) + 'px';
    })
    event.preventDefault();
}
</script>

<style scoped>
.calendar {
    overflow: hidden;
}

.new {
    width: 1000px;
    height: auto;
    margin: 20px auto;
    box-shadow: 0px 0px 10px #ccc;
}

.new-row {
    width: 100%;
    min-height: 50px;
    display: flex;
}

.new-row-item {
    flex: 1;
    text-align: center;
}

.new-row-item+.new-row-item {
    border-left: 1px solid red;
}

.new-row-item-drap {
    width: 100%;
    height: 20px;
    background: skyblue;
    user-select: none;
}

.new-row-item-drap2 {
    background: rgba(135, 207, 235, 0.493);
}

.drag-box {
    height: 100%;
}

.drag-box-header {
    height: 20px;
    line-height: 20px;
}

.drag-box-task {
    height: 42px;
    margin-top: 4px;
}

.drag-box-task-item {
    width: 100%;
    height: 20px;
    user-select: none;
    position: relative;
    user-select: none;
}

.drag-box-task-item-content {
    position: absolute;
    background: skyblue;
    text-align: left;
    width: 100%;
}

.drag-box-task-item+.drag-box-task-item {
    margin-top: 2px;
}
</style>